<template>
  <div class="box" @mousemove="mouseMove">
    <h2>当前的X轴坐标----{{ clientX }}</h2>
    <h2>当前的Y轴坐标----{{ clientY }}</h2>
    <button @click="getBeauty">获取美女图片</button>
    <img width="500" :src="imgUrl" alt="" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';

const clientX = ref(0);
const clientY = ref(0);

const mouseMove = (e: MouseEvent) => {
  clientX.value = e.clientX;
  clientY.value = e.clientY;
};

onMounted(() => {
  console.log('鼠标位置初始化！');
});

const imgUrl = ref('');
const getBeauty = async () => {
  const result = await axios.get(
    `https://v.api.aa1.cn/api/pc-girl_bz/index.php?wpon=json`
  );
  imgUrl.value = result.data.img;
};
</script>

<style>
.box {
  width: 1880px;
  height: 900px;
  border: 1px solid red;
}
</style>
